<template>
<div>
  <el-breadcrumb
    separator-class="el-icon-arrow-left"
    style="margin-right: 30px;position:absolute;right:0;ub main-center cross-center"
  >
    <el-breadcrumb-item :to="{ path: '/' }">出入单查询</el-breadcrumb-item>
    <el-breadcrumb-item>中心库房</el-breadcrumb-item>

    <el-breadcrumb-item>配送中心</el-breadcrumb-item>
  </el-breadcrumb>

   <!-- 查询信息的表单 -->
  <el-form ref="form" :model="form" label-width="150px">
      <el-input class="input" placeholder="商品名称" v-model="form.name" clearable @clear="chaxun"></el-input>
      <el-date-picker
       class="input2"
      v-model="form.date"
      type="datetimerange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期">
    </el-date-picker>
      <el-button class="btn1" type="primary" icon="el-icon-search" @click="chaxun1">查询</el-button>
  </el-form>

   <el-table
   v-loading="loading"
    ref="filterTable"
    :data="form2"
    style="width: 100%">
       <el-table-column type="index" fixed></el-table-column>
       <el-table-column
      prop="commodityId"
      label="商品代码"
      width="150">
    </el-table-column>
    <el-table-column  
      prop="commdityName"
      label="商品名称"
      width="150">
    </el-table-column>  
    <el-table-column
      prop="warehosueName"
      label="库房名称"
      width="150">
    </el-table-column>
     <el-table-column
      prop="updateTime"
      label="更新时间"
      width="150">
    </el-table-column>
   <el-table-column
      prop="actualVolume"
      label="出入库数量"
      width="150">
    </el-table-column>
    <el-table-column
      prop="amount"
      label="金额"
      width="150">
    </el-table-column>
    <el-table-column
      prop="formId"
      label="单号"
      width="150">
    </el-table-column>
    <el-table-column
      prop="type"
      label="出入单类型"
      width="150">
    </el-table-column>
     <el-table-column
      prop="unitPrice"
      label="单价"
      width="150">
    </el-table-column>
    <el-table-column label="操作" width="200px;" fixed="right">
      <template slot-scope="scope">
         <el-tooltip effect="dark" content="编辑" placement="top" :enterable="false">
        <el-button
          disabled
          icon="el-icon-edit"
          type="primary"
          size="mini"
          @click="handleEdit(scope.$index, scope.row)"
          >编辑</el-button>
         </el-tooltip>
          <el-tooltip effect="dark" content="删除" placement="top" :enterable="false">
        <el-button
          icon="el-icon-delete"
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, form2)">删除</el-button>
          </el-tooltip>
      </template>
    </el-table-column>
  </el-table>
  <div class="block">
    <el-pagination
      @size-change="handleSizeChange"   
      @current-change="handleCurrentChange" 
      :current-page="pageNum" 
      :page-sizes="[10, 11, 12, 15]"
      :page-size="pageSize" 
      layout="total, sizes, prev, pager, next, jumper" 
      :total="total"> 
</el-pagination>
</div>
</div>
</template>

<script>
export default {
  data() {
    return{
      pageSize:10,
      pageNum:1,
      loading:true,
       total: 0,
       queryInfo: {
        query:'',
        type: 3,
        pageNum: 1,
        pageSize: 2,
      },
      form:{
        date: [new Date(), new Date()],
        name:''
      },
      form2:[]
    }
  },
  methods:{
    //分页查询
    async chaxun() {
      this.loading = true
      const{data:res} =  await this.$http.post('/api/send/getInOutVo?pageNum='+this.pageNum+'&pageSize='+this.pageSize,{
        // 'endTime':this.form.date[1],
        // 'startTime':this.form.date[0],
        // 'name':this.form.name,
        // 'pageNum':this.queryInfo.pageNum,
        // 'pageSize':this.queryInfo.pageSize
      })
      if(res.code == 200){
        console.log("chaxun")
        console.log(res)
        let form2 = res.data
        this.total = res.total
        this.form2 = form2
        console.log(form2)
        console.log(this.total)
        this.loading = false
      }else{
        return this.$message.error(res.msg)
      }
    },
    //查询条件
    async chaxun1() {
      var year = this.form.date[0].getFullYear()
      var month = this.form.date[0].getMonth() + 1
      var day = this.form.date[0].getDate()
      var hour = this.form.date[0].getHours()
      var minutes = this.form.date[0].getMinutes()
      var second = this.form.date[0].getSeconds()
      var currentTime = year + "-" + (month<10?"0"+month:month) + "-" + (day<10?"0"+day:day) +" "+(hour<10?"0"+hour:hour)+":"+(minutes<10?"0"+minutes:minutes)+":"+(second<10?"0"+second:second)
      
      var year1 = this.form.date[1].getFullYear()
      var month1 = this.form.date[1].getMonth() + 1
      var day1 = this.form.date[1].getDate()
      var hour1 = this.form.date[1].getHours()
      var minutes1 = this.form.date[1].getMinutes()
      var second1 = this.form.date[1].getSeconds()
      var currentTime1 = year1 + "-" + (month1<10?"0"+month1:month1) + "-" + (day1<10?"0"+day1:day1) +""+" "+(hour1<10?"0"+hour1:hour1)+":"+(minutes1<10?"0"+minutes1:minutes1)+":"+(second1<10?"0"+second1:second1)
      
      if(this.form.name == "" || this.form.startTime == "" || this.form.endTime == ""){
        return this.$message.error("查询条件不能为空")
      }else{
        this.loading = true
         const{data:res} = await this.$http.post('/api/send/getInOutVo?pageNum='+this.pageNum+'&pageSize='+this.pageSize,{
        'endTime':currentTime1,
        'startTime':currentTime,
        'name':this.form.name
      })
      if(res.code == 200){
        console.log("chaxun")
        console.log(res)
        let form2 = res.data
        this.total = res.total
        this.form2 = form2
        console.log(form2)
        console.log(this.total)    
        this.loading = false
      }else{
        return this.$message.error(res.msg)
      }
      }
     
    },
     handleEdit(index, row) { 
        this.form2 = Object.assign({},row)
        this.form2.index = index
      },
      handleDelete(index, rows) {
        console.log(index, rows);
        rows.splice(index,1);
      },
               /* 设置分页效果下的方法 */
/* 页面大小的改变触发的方法 */
      handleSizeChange(newSize) {
        this.pageSize = newSize
        this.chaxun()
        
      },
      /* 页面数发送改变的时候 */
      handleCurrentChange(newPage) {
        this.pageNum = newPage
        this.chaxun()
      
      }
  },
  created () {
    this.chaxun()
  }
};
</script>

<style scoped>
/* *{
  margin: 0px auto;
  padding: 0px;
} */
.input{
  width: 150px;
  margin-top: 20px;
  margin-left: 10px;
  margin-bottom: 10px;
}
.btn1{
  /* width: 120px; */
  height: 40px;
  margin-left: 10px;
  margin-right: 10px;
  background-color: rgb(32, 178, 170);
}
.btn2{
  text-align: center;
  width: 120px;
  height: 40px;
  margin-left: 150px;
}
.input1{
  margin-top: 10px;
  width: 400px;
}
.input2{
  margin-left: 10px;
}
</style>